<template>
    <div class="min-h-screen text-gray-600 ">
        <!-- 试卷标题 -->
        <div class="w-full flex justify-center items-center p-4  bg-white mb-6">
            <span class="text-xl">2024-2025操作系统期末卷</span>
        </div>
        <!-- 批阅试卷-->
        <div class="w-full flex  flex-col ">
            <!-- 左侧展示题目及学生作答情况 -->
            <div :class="['rounded-lg p-4 bg-white  mb-4',isCardCollapse?'':'w-[calc(100%-320px)]']">
            <!-- <div :class="['h-[100vh] rounded-lg p-4 bg-white overflow-y-auto w-[calc(100%-30px)]']"> -->
                <!-- 客观题 -->
                 <div v-for="(section,index1) in  objectiveQuestions" :key="index1" class="mb-4" v-show="settingsData.showObjective" >
                    <!-- 题目类型 -->
                    <div class="font-bold text-[18px] mb-4">
                        <span>{{ section.section_name }} (共{{ section.question_count }}题, {{ section.total_score}}分)</span>
                    </div>
                    <div class="space-y-4">
                        <div v-for="(question,index2) in section.questions" :key="index2" class="border-2 p-6  rounded-lg"  :id="`que_${question.id}`">
                            <span class="text-gray-400 text-sm">{{ index2+1 }}. ({{ question.type }}，{{ question.score }}分)</span>
                            <div class="mt-4 space-y-4">
                                <span>{{ question.content }}</span>
                                 <div v-for="(option, index) in question.options" :key="index">
                                    {{ option }}
                                </div>
                                <!-- 学生答案 -->
                                 <div class="bg-blue-50 border border-l-4 border-blue-300 px-4 py-6 space-y-4 flex justify-between w-[70%]">
                                   
                                   <div  class="flex items-center space-x-1">
                                     <el-icon class="text-blue-400"><UserFilled /></el-icon>
                                     <span class="whitespace-nowrap font-bold">学生答案：</span>
                                     <span v-if="objectiveAnswers[index1]&&objectiveAnswers[index1].answers[index2]">{{objectiveAnswers[index1].answers[index2].answer}}</span>
                                   </div> 
                                     <div class="flex items-center space-x-2">
                                        <span>得分：</span> 
                                        <div class="px-4 border bg-white">{{ question.score }}</div> 
                                        <span >分</span>
                                         <el-icon class="text-green-600 text-2xl"v-if="objectiveAnswers[index1]&&objectiveAnswers[index1].answers[index2] && objectiveAnswers[index1].answers[index2].isRight" ><Select /></el-icon>
                                         <el-icon class="text-red-600 text-2xl" v-else><CloseBold /></el-icon>
                                     </div>  
                                 </div>

                                <!-- 正确答案和答案解析 -->
                                 <div class="border border-l-4 border-gray-200 px-4 py-6 space-y-4 w-[70%]">
                                     <div class="flex items-start space-x-1">
                                        <div class="flex items-center space-x-1">
                                            <el-icon class="text-green-600"><SuccessFilled /></el-icon>
                                            <span class="text-green-600 font-bold whitespace-nowrap">正确答案：</span>
                                        </div>
                                        <div  class="break-words" v-for="(answer, index) in question.answer">{{ answer }}</div>
                                    </div>
                                    <div class="flex items-start space-x-2">
                                        <div class="flex items-center space-x-2">
                                            <font-awesome-icon :icon="['far', 'lightbulb']" class="text-gray-500 "/>
                                            <span class="text-gray-500 font-bold whitespace-nowrap">答案解析：</span>
                                        </div>
                                        <span>{{ question.explanation }}</span>
                                    </div>
                               </div>
                            </div>
                        </div>    

                    </div>

                 </div>
                <!-- 主观题 -->
                 <div v-for="(section,index1) in subjectiveQuestions" :key="index1" class="mb-4" >
                    <!-- 题目主干 -->
                    <div class="font-bold text-[18px] mb-4">
                        <span>{{ section.section_name }} (共{{ section.question_count }}题, {{ section.total_score}}分)</span>
                    </div>
                    <div class="space-y-4">
                        <div v-for="(question,index2) in section.questions" :key="index2" class="border-2 p-6  rounded-lg"  :id="`que_${question.id}`">
                           <span class="text-gray-400 text-sm">{{ index2+1 }}. ({{ question.type }}，{{ question.score }}分)</span>
                           <div class="mt-4 space-y-4">
                                <span v-if="settingsData.showSubjectiveTitle">{{ question.content }}</span>
                                <div class="flex space-x-6 w-full  ">
                                    <div class="flex-1 space-y-6">
                                        <div v-for="(option, index) in question.options">
                                                {{ option }}
                                        </div>
                                        <!-- 学生答案 -->
                                        <div class="bg-blue-50 border border-l-4 border-blue-300 px-4 py-6 space-y-4 flex justify-between" >
                                            
                                            <div  class="flex items-start  flex-col space-y-2">
                                                <div class="flex items-center space-x-1">
                                                    <el-icon class="text-blue-400"><UserFilled /></el-icon>
                                                    <span class=" font-bold whitespace-nowrap">学生答案：</span>
                                                </div>
                                                <div v-if="settingsData.showStudentWordsCount">(116字)</div>
                                                <!-- <div class="break-words ml-4 text-sm">{{subjectiveAnswers[index1].answers[index2].answer}}</div> -->
                                                <div v-if="objectiveAnswers[index1]&&objectiveAnswers[index1].answers[index2]" class="break-words ml-4 text-sm" v-html="subjectiveAnswers[index1].answers[index2].answer"></div>

                                            </div> 
                                                
                                        </div>
                                        <!-- 正确答案和答案解析 -->
                                        <div class="border border-l-4 border-gray-200 px-4 py-6 space-y-4 " v-show="settingsData.showCorrectAnswer">
                                                <div class="flex flex-col items-start space-y-2 " >
                                                    <div class="flex items-center space-x-1">
                                                        <el-icon class="text-green-600"><SuccessFilled /></el-icon>
                                                        <span class="text-green-600 font-bold whitespace-nowrap">正确答案：</span>
                                                    </div>
                                                    <!-- <div  class="break-words ml-4 text-sm"  >{{ question.answer }}</div> -->
                                                    <div  class="break-words ml-4 text-sm"  v-html="question.answer" ></div>
                                                </div>
                                                <div class="flex items-start space-x-2">
                                                    <div class="flex  items-center space-x-2">
                                                        <font-awesome-icon :icon="['far', 'lightbulb']" class="text-gray-500 "/>
                                                        <span class="text-gray-500 font-bold whitespace-nowrap">答案解析：</span>
                                                    </div>
                                                    <div v-html="question.explanation "></div>
                                                </div>
                                        </div>
                                    </div>
                                    <SubjectiveScore v-if="objectiveAnswers[index1]&&objectiveAnswers[index1].answers[index2]" :baseScore="question.score" 
                                     v-model:score="subjectiveAnswers[index1].answers[index2].score"
                                     v-model:questionComment="subjectiveAnswers[index1].answers[index2].questionComment"
                                     v-model:questionMark="subjectiveAnswers[index1].answers[index2].questionMark"
                                    />
                                </div>
                           </div>    
                        </div>    

                    </div>

                 </div>
                 
            </div>
          
            <!-- 右侧批阅卡 -->
             <div :class="['w-[280px] fixed  top-90   rounded-lg  z-0  opacity-1',isCardCollapse?'right-[-280px]':'right-[50px]']" >
                <!-- 是否折叠批阅卡 -->
                 <div class="rightArrow" @click="isCardCollapse=!isCardCollapse">
                    <font-awesome-icon :icon="['fa', 'caret-left']" class="text-gray-500 " v-if="isCardCollapse"/>
                    <font-awesome-icon :icon="['fa', 'caret-right']" class="text-gray-500 " v-else/>
                 </div>
                                            

                <ul  class="relative h-[50px]  tabUI flex">
                    <li id="one1" :class="[selectedTab==1?'cur':'']" @click="changeTab(1)">批阅卡</li>
                    <li id="one2" :class="[selectedTab==2?'cur':'']"  @click="changeTab(2)">设置</li>
                </ul>
                <div class="bg-white px-4  h-[60vh] overflow-y-auto" v-show="selectedTab==1" >
                    <!-- 头像 -->
                    <div class="border-b py-4 flex items-center">
                    <el-avatar :size="80" :src="studentInfo.avatarUrl" />
                    <div class="ml-4 flex flex-col text-gray-400 text-sm space-y-1 py-2">
                        <span>{{ studentInfo.name }}</span>
                        <span>{{ studentInfo.id }}</span>
                        <span>{{ studentInfo.className }}</span>
                    </div>
                    </div>
                    <div class="py-4 flex items-center text-gray-400 text-sm space-x-6">
                    <span class="text-gray-400 text-sm"><i class="bg-[#3a8bff]  inline-block w-2.5 h-2.5 border border-[#3A8BFF] rounded-sm align-middle mr-1.5 -mt-0.5"></i> 批阅卡</span>
                    <span class="text-gray-400 text-sm"><i class="bg-[#BFDAFF]  inline-block w-2.5 h-2.5 border border-[#3A8BFF] rounded-sm align-middle mr-1.5 -mt-0.5"></i> 已批</span>
                    <span class="text-gray-400 text-sm"><i class=" inline-block w-2.5 h-2.5 border border-[#3A8BFF] rounded-sm align-middle mr-1.5 -mt-0.5"></i> 未批</span>
                    </div>
                    <!-- 题目类型  -->
                    <div class="mt-4 flex  flex-col ">
                        <div v-for="(section,index1) in objectiveQuestions" :key="index1"  v-show="settingsData.showObjective">
                            <div class="font-bold text-[14px] mb-4">
                                <span>{{ section.section_name }} (共{{ section.question_count }}题, {{ section.total_score}}分)</span>
                            </div>
                             <div class="grid grid-cols-4 gap-4 text-center mb-4 ">
                                <a 
                                    v-for="(question,index2) in section.questions" :href="`#que_${ question.id}`" 
                                    class="border border-blue-200 bg-blue-100/50 text-sm text-blue-400 px-1 py-2 rounded-lg relative">
                                    {{ index2+1 }}
                                     <el-icon class="text-green-500 font-bold absolute z-10 top-[22px] right-[-5px]"v-if="objectiveAnswers[index1]&&objectiveAnswers[index1].answers[index2] && objectiveAnswers[index1].answers[index2].isRight" ><SuccessFilled /></el-icon>
                                    <el-icon class="text-red-600 font-bold absolute z-10 top-[22px] right-[-5px]" v-else><CircleCloseFilled /></el-icon>
                                    
                                </a>
                            

                            </div>
                        </div>
                        <div v-for="(section,index1) in subjectiveQuestions" :key="index1"  >
                            <div class="font-bold text-[14px] mb-4">
                                <span>{{ section.section_name }} (共{{ section.question_count }}题, {{ section.total_score}}分)</span>
                            </div>
                             <div class="grid grid-cols-4 gap-4 text-center mb-4 ">
                                <a  v-for="(question,index2) in section.questions" :href="`#que_${ question.id}`" 
                                class="border border-blue-200 bg-blue-100/50 text-sm text-blue-400 px-1 py-2 rounded-lg">{{ index2+1 }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 设置部分 -->
                 <div class="bg-white px-4 py-2 h-[60vh] overflow-y-auto" v-show="selectedTab==2" >
                    <div class="flex items-center space-x-3">
                        <el-checkbox v-model="settingsData.showObjective"/><span>显示客观题</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <el-checkbox v-model="settingsData.showSubjectiveTitle"/><span>显示主观题题干</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <el-checkbox v-model="settingsData.showCorrectAnswer"/><span>显示主观题正确答案</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <el-checkbox v-model="settingsData.showStudentWordsCount"/><span>显示主观题学生作答字数</span>
                    </div>
                </div>
             
             </div>
             <!-- 考试批语 -->
                <div  :class="['rounded-lg p-4 space-y-2 bg-white mb-4',isCardCollapse?'':'w-[calc(100%-320px)]',isShowRichText?'h-[320px]':'h-[120px] ']">
                    <span class="text-[14px] ">考试批语</span>
                    <div class="text-gray-400 text-[12px] border  border-gray-200 px-2 py-4" @click="isShowRichText=true" v-if="!isShowRichText">输入考试评语</div>
                    <RichTextEditor v-model:html="reviewComment"  @change="(html)=>{reviewComment = html}"  v-show="isShowRichText"/>
                </div>
                
        </div>
        <!-- 成绩的区域 footer -->
         <div class="fixed bottom-0  bg-white h-[60px] min-w-[1360px] md:w-[95%]  p-3 flex justify-between items-center">
            <div class="">
                <el-button type="primary" link>打回重做</el-button>
            </div>
            <!-- 分数提交按钮 -->
            <div class=" flex  items-center space-x-6 mr-10">
                <div class="flex items-center gap-2 bg-gray-100 px-4 py-2 rounded-md">
                    <div class="text-gray-600">客观题得分：{{objectiveScore}}分</div>
                    <div class=" flex items-center gap-2 text-red-600">
                        <span class="whitespace-nowrap">总分</span>
                        <el-input v-model.number="totalScore" class="text-red-600 w-20"></el-input>
                    </div>
                </div>
                <el-button  class="w-20" round @click="submitScore" >提交</el-button>
                <el-button  class="w-40" round  type="primary" @click="nextPaper">提交并进入下一份</el-button>
                <div class="text-gray-400">待批 <b>0</b>/38</div>

            </div>
         </div>


         <!-- 快速打分的弹框 -->

    </div>
</template>

<script setup>
import { ref,reactive,onMounted,computed } from 'vue'
import { useRouter } from 'vue-router'
import { getReviewPaperDetailData,getStudentAnswersData } from '@/api/exam'
import {UserFilled,SuccessFilled,Select} from '@element-plus/icons-vue'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import RichTextEditor from '@/components/RichTextEditor.vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import SubjectiveScore from './SubjectiveScore.vue';


// 获取试卷详情数据
const examInfo = ref({
    id:null,
    title: '试卷详情页',
    totalQuestions:null,
    totalScore:null

})
const paperSection = ref([])
//主观题数据
const subjectiveQuestions = ref([])
//客观题数据
const objectiveQuestions = ref([])

const   getPaperDetailData = async()=>{ 
  /*   await getPaperDetail().then(res => {
        console.log(res,'<<<<')
        examInfo.value = res.data.data.examInfo
        paperSection.value = res.data.data.sections
    }) */
    getReviewPaperDetailData().then(res => {
        console.log(res,'<<<<')
        // studentInfo.value = res.data.data.studentInfo
        subjectiveQuestions.value = res.data.data.subjectiveItems
        objectiveQuestions.value = res.data.data.objectiveItems
    })
}

// 学生信息数据
const studentInfo = ref({
    name: '王雨妍',
    id: 230129021,
    className: '软件231',
    avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/786cd6ba4f96683bd6e97161c6e607d4.jpg',
})
//客观题答案数据
const objectiveAnswers = ref([])
//主观题答案数据
const subjectiveAnswers = ref([])
//获取学生答题卡数据
const getStudentAnswersCardData =async () => { 
    //根据id查询  
    getStudentAnswersData().then(res => { 
        console.log("答题卡信息----",res);
        studentInfo.value = res.data.data.studentInfo
        objectiveAnswers.value = res.data.data.objectiveAnswers
        subjectiveAnswers.value = res.data.data.subjectiveAnswers
        // console.log(objectiveAnswers.value,'objectiveAnswers');

    })
}

//切换tabs
const selectedTab = ref(1)
const changeTab = (index) => {
    selectedTab.value = index
}
//右侧设置按钮的数据
const  settingsData = reactive({
    //显示客观题
    showObjective: false,
    //显示主观题题干
    showSubjectiveTitle: true,
    //显示主观题正确答案
    showCorrectAnswer: true,
    //显示主观题学生作答字数
    showStudentWordsCount: false
})

// 阅览卡折叠
const isCardCollapse = ref(false)
//考试的批语
const reviewComment = ref('')
//考试批语的富文本是否展示
const  isShowRichText = ref(false)
//试卷客观题分数
const objectiveScore = computed(() => { 
    let score = 0
    objectiveAnswers?.value.forEach(item => { 
        // console.log(item,'item')
        score += item.score
    })
    return score
})
// 主观题分数
const subjectiveScore = computed(() => { 
    let score = 0
    subjectiveAnswers?.value.forEach(item => { 
        item.answers.forEach(item=>{ 
        //    console.log(item.score,'item');
            score += parseFloat(item.score)
        })
    })
    return score
})
//试卷总分
const totalScore = computed(() => { 
    console.log(objectiveScore.value,'总分',subjectiveScore.value);
    return objectiveScore.value + subjectiveScore.value
})



//提交学生成绩
const submitScore = () => { 
    console.log(totalScore.value,'总分',studentInfo.value,'学生信息',reviewComment.value,'批语');
    //提交学生成绩
}
//提交并进入下一份试卷
const nextPaper = () => { 
    console.log('提交并进入下一份试卷');
    //todo获取下一个学生的信息
}

onMounted(async ()=>{
   await getPaperDetailData()
   await getStudentAnswersCardData()
})
</script >
<style lang="less" scoped>
.tabUI li {
    cursor: pointer;
    font-size: 15px;
    color: #8A8B99;
    text-align: center;
    line-height: 37px;
    width: 148px;
    height: 44px;
    background: url('@/assets/img/tablibgCur.png') no-repeat;
    background-size: 100% 100%;
    // position: absolute;
}
.tabUI li.cur {
    background: url(@/assets/img/tablibgCur.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    font-size: 16px;
    color: #131B26;
    font-weight: 500;
}

//  i {
//     display: inline-block;
//     width: 10px;
//     height: 10px;
//     border: 1px solid #3A8BFF;
//     border-radius: 2px;
//     vertical-align: middle;
//     margin-right: 6px;
//     margin-top: -2px;
// }
.score-select :deep(.el-select__selection) {
  display: none;
}
.score-select :deep(.el-select__wrapper,.el-tooltip__trigger,.el-tooltip__trigger) {
  background: none !important;
  box-shadow: none !important;
}

.score-mode li {
    display: inline-block;
    float: left;
    cursor: pointer;
    border: 1px solid #D4D6D9;
    border-radius: 5px;
    font-size: 14px;
    color:#474C59;
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 12px 12px 0;
    background: #fff;
    padding: 0 5px;
    max-width: 100%;
}

.score-mode li.zero {
    color:#fff;
    background: #F36161;
    border: 1px solid #F36161;
}
.score-mode li.full {
    color:#fff;
    background: #52CC5C;
    border: 1px solid #52CC5C;
}

.fastCommentList li {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #DADFE5;
    border-radius: 4px;
    font-size: 12px;
    color: #8A8B99;
    padding: 0 8px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 12px 12px 0;
    background: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.rightArrow {
    position: absolute;
    width: 16px;
    height: 60px;
    background: url(@/assets/img//arrowbx.png) no-repeat;
    background-size: 100%;
    left: -16px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>